Vue.component('context-menu', {
	template: `
		<div class="context-menu" 
				v-show="visible" 
				@contextmenu.prevent.stop="handleContextMenu($event)"
				@click="visible=false">
			<div class="menus" :style="styleInfo" ref="menusRef">
				<div class="menu" v-for="(item, id) in menus">
					<div @click.prevent.stop="runMenuAction(item)">
						{{item}}
					</div>
				</div>
			</div>
		</div>
	`,
	data: function(){
		return {
			visible: false,
			styleInfo: {
				top: '0px',
				left: '0px',
			},
			menus:[
				"console"
			]
		};
	
	},
	
	computed: {

	},

	methods: {
		runMenuAction: function(menu){
			let self = this;
			self.visible = false;
			if('console' == menu){
				self.$bus.$emit('show-console', {menu: menu});
				return;
			}

			self.$bus.$emit('menu-clicked', {menu: menu});

		},

		handleMenuShowing: function(evtMsg){
			let self = this;
			let offsetTop = evtMsg.event.y; 
			let offsetLeft = evtMsg.event.x;
			let menusRect = self.$refs.menusRef.getBoundingClientRect();
			console.log(menusRect);
			self.styleInfo.top = offsetTop + 'px';
			self.styleInfo.left = offsetLeft + 'px';
			self.visible = true;

		},

		handleContextMenu: function(event){
			let self = this;
			let offsetTop = event.y; 
			let offsetLeft = event.x;
			let menusRect = self.$refs.menusRef.getBoundingClientRect();
			console.log(menusRect);
			self.styleInfo.top = offsetTop + 'px';
			self.styleInfo.left = offsetLeft + 'px';

		},

	},
	
	created: function(){
		console.log('context-menu created....');
		let self = this;
		self.$bus.$on('show-context-menu', function(evtMsg){
			console.log({name: 'show-context-menu', data: evtMsg});
			self.$nextTick(function(){
				self.handleMenuShowing(evtMsg);
			});

		});
		self.$bus.$on('context-menu-request', function(evtMsg){
			console.log({name: 'context-menu-request', data: evtMsg});
			let from = evtMsg.from;
			if('app' == from){
				self.$bus.$emit('show-console', {from: 'app'});
				return;
			}
			if('console' == from){
				let menus = ['exit'];
				self.handleMenuShowing(evtMsg);
				return;
			}

		});

	}

});